<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const knowledgeBases = ref([
  {
    id: 1,
    title: '百胜运营知识库',
    description: '暂无描述',
    type: '企业',
    starred: false
  },
  {
    id: 2,
    title: '产品研发',
    description: '为产品团队提供的能力',
    type: '企业',
    starred: true
  },
  {
    id: 3,
    title: '红红红',
    description: '为产品团队提供的能力',
    type: '企业',
    starred: false
  },
  {
    id: 4,
    title: 'HR & 招聘',
    description: '全面的人力资源管理',
    type: '企业',
    starred: false
  },
  {
    id: 5,
    title: '空白知识库',
    description: '初始化知识库',
    type: '个人',
    starred: false,
    isEmpty: true
  }
])

const navigateToDetail = (id) => {
  router.push(`/knowledge-bases/${id}`)
}

const createNew = () => {
  router.push('/knowledge-bases/new')
}

const toggleStar = (event, kb) => {
  event.stopPropagation()
  kb.starred = !kb.starred
}
</script>

<template>
  <div class="knowledge-base-list">
    <div class="header">
      <h2>知识库</h2>
      <button class="create-btn" @click="createNew">
        + 新建知识库
      </button>
    </div>

    <div class="list">
      <div 
        v-for="kb in knowledgeBases" 
        :key="kb.id"
        class="kb-card"
        :class="{ 'empty-kb': kb.isEmpty }"
        @click="navigateToDetail(kb.id)"
      >
        <div class="kb-header">
          <h3>{{ kb.title }}</h3>
          <span class="type-tag">{{ kb.type }}</span>
        </div>
        <p class="description">{{ kb.description }}</p>
        <div class="kb-footer">
          <span 
            class="star" 
            :class="{ starred: kb.starred }"
            @click="toggleStar($event, kb)"
          >
            ★
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.knowledge-base-list {
  padding: 2rem;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.create-btn {
  padding: 0.5rem 1rem;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

.list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.kb-card {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.2s;
}

.empty-kb {
  border: 1px dashed #e9ecef;
  background: #f8f9fa;
}

.kb-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.kb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.type-tag {
  background: #f8f9fa;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.875rem;
  color: #6c757d;
}

.description {
  color: #6c757d;
  margin-bottom: 1rem;
}

.star {
  color: #dee2e6;
  cursor: pointer;
  font-size: 1.25rem;
  transition: color 0.2s;
}

.starred {
  color: #ffd700;
}
</style> 